<div class="figure-wrapper">
  <figure
    style="justify-content: center"
    aria-label="A filled button that says menu with submenus. Interact with the button to interact with a menu that has two sub menus."
  >
    <span style="position: relative">
      <md-filled-button id="usage-submenu-anchor"> Menu with Submenus </md-filled-button>
      <!-- Note the has-overflow attribute -->
      <md-menu has-overflow id="usage-submenu" anchor="usage-submenu-anchor">
        <md-sub-menu>
          <md-menu-item slot="item">
            <div slot="headline">Fruits with A</div>
            <!-- Arrow icons are helpful affordances -->
            <md-icon slot="end">arrow_right</md-icon>
          </md-menu-item>
          <!-- Submenu must be slotted into sub-menu's menu slot -->
          <md-menu slot="menu">
            <md-menu-item>
              <div slot="headline">Apricot</div>
            </md-menu-item>
            <md-menu-item>
              <div slot="headline">Avocado</div>
            </md-menu-item>
            <!-- Nest as many as you want and control menu anchoring -->
            <md-sub-menu menu-corner="start-end" anchor-corner="start-start">
              <md-menu-item slot="item">
                <div slot="headline">Apples</div>
                <!-- Arrow icons are helpful affordances -->
                <md-icon slot="start">
                  arrow_left
                </md-icon>
              </md-menu-item>
              <md-menu slot="menu">
                <md-menu-item>
                  <div slot="headline">Fuji</div>
                </md-menu-item>
                <md-menu-item>
                  <div slot="headline" style="white-space: nowrap;">Granny Smith</div>
                </md-menu-item>
                <md-menu-item>
                  <div slot="headline" style="white-space: nowrap;">Red Delicious</div>
                </md-menu-item>
              </md-menu>
            </md-sub-menu>
          </md-menu>
        </md-sub-menu>
        <md-menu-item>
          <div slot="headline">Banana</div>
        </md-menu-item>
        <md-menu-item>
          <div slot="headline">Cucumber</div>
        </md-menu-item>
      </md-menu>
    </span>
    <script type="module">
      const anchorEl = document.body.querySelector("#usage-submenu-anchor");
      const menuEl = document.body.querySelector("#usage-submenu");
      anchorEl.addEventListener("click", () => {
        menuEl.open = !menuEl.open;
      });
    </script>
  </figure>
</div>
